<template>
    <div>
        <el-radio-group v-model="questionAnswer" v-for="(item, index) in optionsList" class="radio-group">
            <el-radio class="radio" :values="englishWordsArr[index]"
                :label="englishWordsArr[index]">{{ englishWordsArr[index] }} {{ item.value }}</el-radio>111
            <!-- <el-input v-model="item.value" :disabled="true" class="checkbox-input" placeholder="选项，点此编辑，选中即设置为正确答案（必填）" /> -->
        </el-radio-group>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { getqueryBankAPI } from '@/api/api'

const optionsList = ref([])
//答案
const questionAnswer = ref()
//选项
const englishWordsArr = ['A.', 'B.', 'C.', 'D.', 'E.', 'F.', 'G.', 'H.', 'I.', 'J.']
const props = defineProps({
    questionId: {
        default: "",
    }
})
onMounted(() => {
    //查询题目
    if (props.questionId) {
        getqueryBankAPI(props.questionId).then(res => {
            if (res.data.code == 200) {
                // res.data.data.questionAnswer = JSON.parse(res.data.data.questionAnswer)
                optionsList.value = JSON.parse(res.data.data.optionsList)
                console.log(optionsList.value);
                // quesData.value = res.data.data
            }
        })
    }

})
</script>

<style lang="less" scoped>
.radio-group {
    display: flex;
    text-align: center;
}

.radio {
    margin: 8px 0 0 10px;
}

.radio-input {
    font-size: 15px;
    margin-top: 8px;
    color: black;
}

/deep/ .el-radio__input.is-checked .el-radio__inner::after {
    content: '';
    width: 8px;
    height: 3px;
    border: 2px solid white;
    border-top: transparent;
    border-right: transparent;
    text-align: center;
    display: block;
    position: absolute;
    top: 2px;
    left: 1px;
    transform: rotate(-45deg);
    border-radius: 0px;
    background: none;
}
</style>